import { useEffect, useRef } from 'react';
import styles from './index.less';
import useTencentMap from '@/components/useTencentMap';
import { Button, Cascader, Space, Spin } from 'antd';
import { queryCityOptions2 } from '@/services/common';
import { useRequest } from 'ahooks';
import { queryStationList, queryStationStatistic } from './services';
import Pie from './components/Pie'

const DevicePage: React.FC = () => {
  const tencentMap = useTencentMap('stationMap')
  const cityOptions = useRequest(queryCityOptions2)
  const city = useRef<string[]>(['320000', '321300', '321323'])
  const { runAsync } = useRequest(queryStationList, {manual: true})
  const { runAsync: getStatistic, data, loading } = useRequest(queryStationStatistic, {manual: true})
  const marker = useRef<any>()

  const getStationList = (cityId: string) => {
    runAsync({cityId}).then(res => {
      const { data } = res
      if (data.length) {
        const options = data?.map(item => ({
          position: new window.TMap.LatLng(item.latitude, item.longitude),
          properties: {
            id: item.id,
            name: item.stationName,
          }
        }))
        marker.current.setGeometries(options)
        tencentMap.setCenter(new window.TMap.LatLng(options[0].position.lat, options[0].position.lng))
      }
    })
  }

  const getStatisticById = (id: string) => {
    getStatistic({stubGroupId: id})
  }

  const onCityChange = (value: string[]) => {
    city.current = value
  }

  const doSearch = () => {
    getStationList(city.current[2] || city.current[1] || city.current[0])
  }

  useEffect(() => {
    if (tencentMap) {
      tencentMap.removeControl(window.TMap.constants.DEFAULT_CONTROL_ID.SCALE)
      tencentMap.removeControl(window.TMap.constants.DEFAULT_CONTROL_ID.ZOOM)
      tencentMap.removeControl(window.TMap.constants.DEFAULT_CONTROL_ID.ROTATION)

      if (!marker.current) {
        marker.current = new window.TMap.MultiMarker({
          map: tencentMap,
          geometries: [],
        })
        marker.current.on('click', (res: any) => {
          const { properties } = res.geometry
          getStatisticById(properties.id)
        })
      }

      getStationList(city.current[2])
    }
  }, [tencentMap])
  
  return (
    <div className={styles.container}>
      <div className={styles.mapContainer} id='stationMap'></div>
      <div className={styles.select}>
        <Space>
          <Cascader
            defaultValue={city.current}
            loading={cityOptions.loading}
            options={cityOptions.data?.data}
            style={{width: 280}}
            placeholder='请选择'
            onChange={onCityChange as any}
            changeOnSelect
            allowClear={false}
          />
          <Button type='primary' onClick={doSearch}>查询</Button>
        </Space>
      </div>
      <div className={styles.statisticCard} style={{display: !data ? 'none' : 'block'}}>
        <Spin spinning={loading}>
          <div className={styles.title}>
            {/* <img src={data?.data.} /> */}
            <div>{data?.data.stationName}</div>
          </div>
          <div className={styles.info}>
            <div className={styles.item}>地址：{data?.data.address}</div>
          </div>
          <div className={styles.split}></div>
          <div className={styles.label}>直流设备：{data?.data.acNum}</div>
          <div className={styles.device}>
            <Pie name='充电中' value={data?.data.acChargeNum} total={data?.data.acNum} color='#E41019' />
            <Pie name='空闲' value={data?.data.acFreeNumb} total={data?.data.acNum} color='#22B573' />
            <Pie name='占用' value={data?.data.acOccupyNum} total={data?.data.acNum} color='#F9C740' />
            <Pie name='故障' value={data?.data.acErrorNum} total={data?.data.acNum} color='#888888' />
            <Pie name='离线' value={data?.data.acOffLineNum} total={data?.data.acNum} color='#888888' />
            <Pie name='其他' value={data?.data.acOtherNum} total={data?.data.acNum} color='#888888' />
          </div>
          <div className={styles.label}>交流设备：{data?.data.dcNum}</div>
          <div className={styles.device}>
            <Pie name='充电中' value={data?.data.dcChargeNum} total={data?.data.dcNum} color='#E41019' />
            <Pie name='空闲' value={data?.data.dcFreeNumb} total={data?.data.dcNum} color='#22B573' />
            <Pie name='占用' value={data?.data.dcOccupyNum} total={data?.data.dcNum} color='#F9C740' />
            <Pie name='故障' value={data?.data.dcErrorNum} total={data?.data.dcNum} color='#888888' />
            <Pie name='离线' value={data?.data.dcOffLineNum} total={data?.data.dcNum} color='#888888' />
            <Pie name='其他' value={data?.data.dcOtherNum} total={data?.data.dcNum} color='#888888' />
          </div>
        </Spin>
      </div>
    </div>
  );
};

export default DevicePage;
